<!--
 * @Description: ...
 * @Author: yangli 121029539@qq.com
 * @Date: 2025-02-06 11:23:56
 * @LastEditTime: 2025-02-18 09:18:23
 * @LastEditors: yangli 121029539@qq.com
 * @FilePath: \uniapp\src\pagesshopcenter\count.vue
-->
<template>
 <view class="bg-page min-h-screen p-[20rpx]">
    <view class="py-[32rpx] mb-[10px] bg-white rounded-[16rpx] text-[32rpx] text-main">
        <view class="pb-[18rpx] px-[32rpx]">总计佣金</view>
        <view class="pb-[18rpx] px-[32rpx]">总收入：<text class="text-error">￥{{state.total_money}}</text></view>
         <view class="charts-wrap px-[20rpx]">
            <qiun-data-charts 
                type="line"
                :opts="state.opts"
                :chartData="state.chartData"
                />
         </view>
    </view>
    <view class="page-bot rounded-[16rpx] bg-white  pb-[20rpx]">
        <view class="p-[32rpx] tab-th flex flex-row items-center">
            <view class="flex-1  pl-[8rpx]">月份</view>
            <view class="flex-1 text-center">数量</view>
            <view class="flex-1 text-right">佣金</view>
        </view>
          <view class="  border-solid border-0  border-[#f5f5f5] bg-white p-[32rpx]  " 
          :class="{'border-b': index < dataList.length - 1}"
                    v-for="(item, index) in dataList" :key="index">
           <view class=" flex flex-row items-center">
                <view class="flex-1 pl-[8rpx]">{{index + 1}}月</view>
                <view class="flex-1 text-center">2</view>
                <view class="flex-1 text-error text-right">
                    <text class="text-[24rpx]">￥</text>
                    <text class="text-[32rpx]">300000</text>
                </view>
            </view> 
          </view>
                  
    </view>
</view>
</template>

<script setup lang="ts">
import {yongjinList} from '@/api/repair'
import {onLoad,onShow, onPageScroll} from "@dcloudio/uni-app";
import {computed, reactive, ref} from 'vue'
import {useAppStore} from '@/stores/app'
import { useUserStore } from '@/stores/user'
const appStore = useAppStore()
const userStore = useUserStore()
const token = computed(() => userStore.token)
const userInfo = computed(() => userStore.userInfo)
const dataList = ref<any[]>([])
const state = reactive({
    total_money:1212,
    opts: {
    color: ["#FF0000"],
    padding: [15,10,0,15],
    enableScroll: false,
    legend: {},
    xAxis: {
        disableGrid: true
    },
    yAxis: {
        gridType: "dash",
        dashLength: 2
    },
    extra: {
        line: {
        type: "straight",
        width: 2,
        activeType: "hollow"
        }
    }
    },
    chartData:{}
})
const mock_list = [
    {
        id:1,
    },
    {
        id:2,
    },
    {
        id:3,
    }
]

const init = async () => {
    // const res = await yongjinList()
    dataList.value = mock_list
}

const initCharts = async () => {
    //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            series: [
              {
                name: "佣金",
                data: [35,8,25,37,4,20,70,40,65,100,44,68]
              },
            ]
          };
        state.chartData = JSON.parse(JSON.stringify(res));
        console.log('state.chartData',state.chartData)
      }, 500);
}

onShow(() => { 
    init()
    initCharts();
 })
</script>

<style lang="scss" scoped>
.charts-wrap{
    width: 100%;
    height: 402rpx;
}

.tab-th{
    background: linear-gradient(to top, #FFFFFF 0%, #FFECE5 95%)!important;
    border-radius: 16rpx 16rpx 0 0;
}

</style>
